Annotation icon

    WebAdvisor logo

    :

    NaN / NaN
    Back
    EG
    Skip navigation
    Search with your voice
    YouTube apps
    Settings
    Sign in
    EG

    Home
    Explore
    Shorts
    Subscriptions

    Library
    History
    Sign in to like videos, comment, and subscribe. Sign in

    Best of YouTube

    Music
    Sports
    Gaming
    News
    Live
    360° Video

    Browse channels

    More from YouTube

    YouTube Premium
    Live

    Settings
    Report history
    Help
    Send feedback
    AboutPressCopyrightContact usCreatorsAdvertiseDevelopers
    TermsPrivacyPolicy & SafetyHow YouTube worksTest new features
    © 2022 Google LLC
    Home
    Home
    Explore
    Explore
    Shorts
    Shorts
    Subscriptions
    Subscriptions
    Library
    Library
    History
    History
    All American Idol Ellen DeGeneres Music React routers Computer programming Cryptocurrency The Voice Comedy Conversation Computers Sales Apple AI Cooking shows Eating Gaming Recently uploaded Live Watched
    3:50 Now playing

    Emyrson Gives A Rousing Performance Of A Miley Cyrus Song - American Idol 2022

    American Idol
    American Idol
    Verified
    •
    305K views 1 day ago
    23:26 Now playing

    Building you first DAPP with React & Truffle - Beginners Tutorial

    Filip Martinsson
    Filip Martinsson
    •
    14K views 3 years ago
    8:48 Now playing

    Tonight Show Family Feud with Steve Harvey and Alison Brie

    The Tonight Show Starring Jimmy Fallon
    The Tonight Show Starring Jimmy Fallon
    Verified
    •
    15M views 6 years ago
    21:21 Now playing

    Crypto News: Recession Fears, BTC Miami, Elon, Twitter & More!!

    Coin Bureau
    Coin Bureau
    Verified
    •
    120K views 18 hours ago
    6:27 Now playing

    GOLDEN BUZZER Audition: SINGER Jeanick Fournier’s Stunning Celine Dion Cover | Canada’s Got Talent

    Canada's Got Talent
    Canada's Got Talent
    Verified
    •
    914K views 6 days ago
    7:07 Now playing

    Elevate Finance | Get Whitelisted For Pre-Launch | Earn 100,000% APY $Elevate

    Yada Crypto
    Yada Crypto
    •
    1.5K views 20 hours ago
    5:12 Now playing

    if Wolf of Wall Street were about crypto

    Joma Tech
    Joma Tech
    Verified
    •
    371K views 3 days ago
    9:27 Now playing

    iPad Air M1 Review: Don't Choose Wrong!

    Marques Brownlee
    Marques Brownlee
    Verified
    •
    3.3M views 3 weeks ago
    3:44:08 Now playing

    React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive

    Brian Design
    Brian Design
    •
    825K views 1 year ago
    4:10 Now playing

    She Can't Be Calmed! Leah Marlene Covers "Call Me" by Blondie - American Idol 2022

    American Idol
    American Idol
    Verified
    •
    116K views 7 hours ago
    2:56 Now playing

    *NSFW ANSWER* Husband did what to the nanny's fanny?? | Family Feud

    FamilyFeud
    FamilyFeud
    Verified
    •
    452K views 2 months ago
    8:52 Now playing

    I'm Not The Best Programmer

    Namanh Kapur
    Namanh Kapur
    •
    511K views 2 weeks ago
    7:04 Now playing

    Crypto Coin vs Token (Differences + Examples)

    Whiteboard Crypto
    Whiteboard Crypto
    Verified
    •
    624K views 10 months ago
    3:13 Now playing

    Kenedi Anderson Gives Another SUPER STAR PERFORMANCE on American Idols' Showstoppers!

    Talent Recap
    Talent Recap
    Verified
    •
    1M views 7 days ago
    7:39 Now playing

    How Do You Build A Mobile Dapp?

    Dapp University
    Dapp University
    •
    17K views 3 years ago
    12:55 Now playing

    Joining random girls for lunch

    ThatWasEpic
    ThatWasEpic
    Verified
    •
    3M views 5 months ago
    12:32 Now playing

    The Highest Earning Business in Shark Tank History? | Shark Tank AUS

    Shark Tank Australia
    Shark Tank Australia
    Verified
    •
    2.8M views 1 year ago
    46:54 Now playing

    Flexbox Crash Course 2022

    Traversy Media
    Traversy Media
    Verified
    •
    121K views 2 months ago
    14:46 Now playing

    Is Dimash Overrated? Rock Vocal Coach Reacts To Dimash "Sinful Passion" LIVE

    Rock Your Best Vocals
    Rock Your Best Vocals
    •
    165K views 1 month ago
    12:29 Now playing

    I FOUND THE BEST CRYPTO PASSIVE INCOME

    Max Maher
    Max Maher
    Verified
    •
    580K views 4 months ago
    3:06 Now playing

    Adele - Easy on me - Lisa | The Voice 2022 | Blind Audition

    The Voice : la plus belle voix
    The Voice : la plus belle voix
    Verified
    •
    460K views 3 weeks ago
    22:36 Now playing

    5 Levels  S1 E16
    Computer Scientist Explains One Concept in 5 Levels of Difficulty | WIRED

    WIRED
    WIRED
    Verified
    •
    4.3M views 2 months ago
    4:24 Now playing

    Steve Harvey Gets Uncomfortable Seeing Pic of His Daughter with Michael B. Jordan

    TheEllenShow
    TheEllenShow
    Verified
    •
    9.8M views 2 months ago
    4:23 Now playing

    DRIVERS LICENSE | Angelica Hale (USA) vs. Celine Tam (Hongkong • Who Sang It Better?

    VS Show
    VS Show
    •
    324K views 1 month ago

    •

    React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive
    Suggested: ReactJS Tutorial For Beginners - User Registration Form
    If playback doesn't begin shortly, try restarting your device.
    5 seconds
    Creating Button Element
    1:39:31
    18:00
    You're signed out
    Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
    Up next
    Live
    Upcoming
    Play Now
    Brian Design
    SUBSCRIBE
    SUBSCRIBED
    Join me on my journey of learning how to code
    Top 5 Website Designs Every Web Developer Should See
    9:02
    Switch camera
    Share
    An error occurred while retrieving sharing information. Please try again later.
    0:00
    3:44:07
    1:31:21 / 3:44:07•Watch full video

    Chapters

    Website Design we're building

    0:00

    Creating React Project

    4:26

    Creating our Project Files

    9:18

    Creating Navbar

    10:44

    Styling Navbar

    16:10

    Creating Sidebar/Dropdown Menu

    46:51

    Styling Sidebar

    48:15

    Creating Home Page

    1:07:22

    Creating Hero Section

    1:14:21

    Styling Hero Section

    1:16:55

    Creating Button Element

    1:32:50

    Creating Reusable Info Section

    1:43:12

    Styling Info Section

    1:47:22

    Adding Data to Info Section

    2:06:08

    Adding Smooth Scroll to Info Section Buttons

    2:18:43

    Creating Services Section

    2:33:18

    Styling Services Section

    2:37:06

    Creating Sign In Page

    2:47:53

    Adding React Routes to Website

    2:48:39

    Creating Footer

    2:52:08

    Styling Footer

    2:59:15

    Changing Navbar background on scroll

    3:20:18

    Adding React Scroll to our site

    3:24:52

    Creating Sign In Component

    3:34:20

    Scroll to Top on Page/Route Change

    3:38:52
    Sync to video time

    Description

    Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site. If you want to follow me along my coding journey, be sure to subscribe :) https://www.youtube.com/channel/UCsKs... Access Source Code Here (Scroll to bottom of page) https://www.codavilla.com/posts/react...
    Timeline 0:00 Website Design we're building 4:26 Creating React Project 9:18 Creating our Project Files 10:44 Creating Navbar 16:10 Styling Navbar 46:51 Creating Sidebar/Dropdown Menu 48:15 Styling Sidebar 1:07:22 Creating Home Page 1:14:21 Creating Hero Section 1:16:55 Styling Hero Section 1:32:50 Creating Button Element 1:43:12 Creating Reusable Info Section 1:47:22 Styling Info Section 2:06:08 Adding Data to Info Section 2:18:43 Adding Smooth Scroll to Info Section Buttons 2:33:18 Creating Services Section 2:37:06 Styling Services Section 2:47:53 Creating Sign In Page 2:48:39 Adding React Routes to Website 2:52:08 Creating Footer 2:59:15 Styling Footer 3:20:18 Changing Navbar background on scroll 3:24:52 Adding React Scroll to our site 3:34:20 Creating Sign In Component 3:38:52 Scroll to Top on Page/Route Change Host your React Website for Free https://youtu.be/C0CNIhRzhYg VS Code Theme I use https://youtu.be/6etaWaiMkvM React Website with Styled Components using only React Router https://youtu.be/iP_HqoCuRI0
    Show less Show more

    Chapters
    View all

    Website Design we're building

    0:00

    Creating React Project

    4:26

    Creating our Project Files

    9:18

    Creating Navbar

    10:44

    Transcript

    :

    NaN / NaN

    React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive

    825,412 views825K views
    Oct 3, 2020
    17K
    I like this
    Dislike
    Share
    Share
    Download
    Save
    Save
    Brian Design
    Brian Design
    85.5K subscribers
    Subscribe
    Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will be using React Hooks and React Router for this project. The main sections are reusable components that you can customize and reuse anywhere on your site. If you want to follow me along my coding journey, be sure to subscribe :) https://www.youtube.com/channel/UCsKs... Access Source Code Here (Scroll to bottom of page) https://www.codavilla.com/posts/react...
    Timeline 0:00 Website Design we're building 4:26 Creating React Project 9:18 Creating our Project Files 10:44 Creating Navbar 16:10 Styling Navbar 46:51 Creating Sidebar/Dropdown Menu 48:15 Styling Sidebar 1:07:22 Creating Home Page 1:14:21 Creating Hero Section 1:16:55 Styling Hero Section 1:32:50 Creating Button Element 1:43:12 Creating Reusable Info Section 1:47:22 Styling Info Section 2:06:08 Adding Data to Info Section 2:18:43 Adding Smooth Scroll to Info Section Buttons 2:33:18 Creating Services Section 2:37:06 Styling Services Section 2:47:53 Creating Sign In Page 2:48:39 Adding React Routes to Website 2:52:08 Creating Footer 2:59:15 Styling Footer 3:20:18 Changing Navbar background on scroll 3:24:52 Adding React Scroll to our site 3:34:20 Creating Sign In Component 3:38:52 Scroll to Top on Page/Route Change Host your React Website for Free https://youtu.be/C0CNIhRzhYg VS Code Theme I use https://youtu.be/6etaWaiMkvM React Website with Styled Components using only React Router https://youtu.be/iP_HqoCuRI0

    Chapters
    View all

    Website Design we're building

    0:00

    Creating React Project

    4:26

    Creating our Project Files

    9:18

    Creating Navbar

    10:44

    Styling Navbar

    16:10

    Creating Sidebar/Dropdown Menu

    46:51
    Show less Show more
    18:00 Now playing

    Dangerous Code Hidden in Plain Sight for 12 years

    PwnFunction
    PwnFunction
    Verified
    •
    289K views 3 days ago
    New
    Now playing

    Mix - Brian Design

    YouTube
    YouTube
    •
    3:36 Now playing

    Nerves Won't Get Fritz Down! He Pulls Off A Great Performance - American Idol 2022

    American Idol
    American Idol
    Verified
    •
    96K views 11 hours ago
    New
    33:10 Now playing

    React Router Tutorial | React For Beginners

    Dev Ed
    Dev Ed
    Verified
    •
    808K views 2 years ago
    10:08 Now playing

    This Website has No Code, or Does it?

    PwnFunction
    PwnFunction
    Verified
    •
    628K views 10 months ago
    7:09 Now playing

    Race Highlights | 2022 Australian Grand Prix

    FORMULA 1
    FORMULA 1
    Verified
    •
    7.5M views 2 days ago
    New
    23:54 Now playing

    Styled Components Full Tutorial - Style Your Components in React

    PedroTech
    PedroTech
    •
    61K views 1 year ago
    42:22 Now playing

    I've been challenged to a CSS Battle rematch | Can I beat him again???

    Kevin Powell
    Kevin Powell
    Verified
    •
    672K views 1 year ago
    3:19 Now playing

    When a physics teacher knows his stuff !!

    Lectures by Walter Lewin. They will make you ♥ Physics.
    Lectures by Walter Lewin. They will make you ♥ Physics.
    Verified
    •
    32M views 6 years ago
    14:20 Now playing

    The Most Likely Ethereum Killer

    Max Maher
    Max Maher
    Verified
    •
    130K views 10 days ago
    48:23 Now playing

    Styled Components Crash Course & Project

    Traversy Media
    Traversy Media
    Verified
    •
    117K views 6 months ago
    15:45 Now playing

    Learn useState In 15 Minutes - React Hooks Explained

    Web Dev Simplified
    Web Dev Simplified
    Verified
    •
    513K views 1 year ago
    26:26 Now playing

    16-Year-Old SHOCKS everyone with her UNIQUE sound in The Voice | #Journey 145

    The Voice Global
    The Voice Global
    Verified
    •
    12M views 5 months ago
    1:09:45 Now playing

    Next.js Crash Course

    Traversy Media
    Traversy Media
    Verified
    •
    479K views 1 year ago
    57:41 Now playing

    React Navbar Tutorial - Beginner React JS Project

    Brian Design
    Brian Design
    •
    247K views 1 year ago
    7:43 Now playing

    Things I Wish I Knew When I Started Programming

    Nick White
    Nick White
    Verified
    •
    27K views 3 days ago
    New
    1:26:57 Now playing

    Code A React Website Tutorial | ReactJS Tutorial For Beginners

    PedroTech
    PedroTech
    •
    45K views 10 months ago
    42:40 Now playing

    Responsive design made easy

    Kevin Powell
    Kevin Powell
    Verified
    •
    360K views 1 year ago
    25:14 Now playing

    React Modal Tutorial Using Hooks and Styled Components

    Brian Design
    Brian Design
    •
    90K views 1 year ago
    34:33 Now playing

    How to Make a React Website Using Styled Components - Beginner Tutorial Webull Stock Website Design

    Brian Design
    Brian Design
    •
    31K views 1 year ago
    Show more

    1,281 Comments

    Sort comments
    Sort by
    Top comments
    Newest first
    Default profile photo
    Add a comment...
    Pinned by Brian Design

    David

    1 year ago •
    Great tutorial! I bought the source code, hope you can continue doing this and making new awesome vids.
    Show less Read more
    1 year ago
    154
    154
    ❤ by Brian Design
    Reply
    View 21 replies from Brian Design and others Hide 21 replies

    Syndrms

    1 year ago •
    Very rare to see react tutorials with actually good designs. You deserve the best, thank you for your amazing videos <3.
    Show less Read more
    1 year ago
    117
    117
    ❤ by Brian Design
    Reply
    View 4 replies from Brian Design and others Hide 4 replies

    seXRP

    7 months ago •
    That was great! I've never used styled components before and all the repetition and patterns you've demonstrated truly helped me build a strong foundation! Thank you!
    Show less Read more
    7 months ago
    3
    3
    Reply

    JRose

    4 months ago •
    Bro I'm only like halfway through but this tutorial is clicking so much more for me than other, much longer and more in depth tutorials. I think maybe it's the order you are going through, combined with the pace. So relieved, finally this React stuff is starting to click in my boomer object oriented brain. Thank you.
    Show less Read more
    4 months ago
    5
    5
    Reply

    Cameron Arnold

    4 months ago •
    If you're having any issues with margins, instead of removing the App.css file, delete everything inside and replace it with *{margin: 0px; padding: 0px}. This will remove all default margins, and give you more freedom to work.
    Show less Read more
    4 months ago
    11
    11
    Reply

    Giulio

    1 year ago (edited) •
    Great video tutorial! Seriously the effort you've put in creating this content is second to none! Great Job mate!
    Show less Read more
    1 year ago (edited)
    1
    1
    Reply
    View reply from Brian Design Hide reply

    RemyFamily

    1 year ago •
    Awesome tutorial! Fellow developers, in case you want to add extra pages like a signup you need to add a few thing extra props onto your styled-component. Example: <SignUpText as="a" href="/signup>Enter Text Here></SignUpText> You can have your styled-components act as something else in this case we added "as" and said to act like an a tag. If you plan to deploy to Netlify, continue reading... You might receive a 404 error when navigating to other pages to fix this you need create a file called "netlify.toml" and add the following: [[redirects]] from = "/*" to = "/index.html" status = 200 Just redeploy and you will be all good to go!
    Show less Read more
    1 year ago
    3
    3
    ❤ by Brian Design
    Reply

    AnythingFX

    2 months ago •
    Hi Brian, your tutorials and design is awesome! Have one question, when you change navbar color with the addEventListener on scroll, shouldnt there be a cleanup function with that listener? And hows performance of that if you trigger that function on scroll? Any option for debounce? Thanks!
    Show less Read more
    2 months ago
    3
    3
    Reply

    Renat Ilyasov

    1 year ago •
    For the svg loading problem I noticed that in InfoElements.js I wrote "styled.div" instead of "styled.img". Great tutorial! Thanks
    Show less Read more
    1 year ago
    12
    12
    ❤ by Brian Design
    Reply
    View 4 replies from Brian Design and others Hide 4 replies

    DIDACTICS

    9 months ago •
    hint: if the images aren't loading in your react, use .default suffix to your img value/path
    Show less Read more
    9 months ago
    18
    18
    Reply
    View 5 replies Hide 5 replies

    Octavian

    1 year ago •
    Great work. A request, could you display the output on the screen as you code. It would help a lot in understanding more of what's happening.
    Show less Read more
    1 year ago
    1
    1
    ❤ by Brian Design
    Reply

    Karthikeyan Subramanian

    1 year ago •
    Unlike other channels, you not only teach React, but also focus on the design part of it which is immensely helpful. Thanks a ton, expecting more amazing content :D
    Show less Read more
    1 year ago
    7
    7
    ❤ by Brian Design
    Reply
    View 3 replies from Brian Design and others Hide 3 replies

    CaseysLastGram

    1 year ago •
    Thanks for all you do man, I appreciate you walking through your errors makes it feel more authentic.
    Show less Read more
    1 year ago
    1
    1
    ❤ by Brian Design
    Reply

    Mustafa Bahaa

    1 year ago •
    for anyone having issue with image not loaded make sure you type img: require('../../images/svg-1.svg').default,
    Show less Read more
    1 year ago
    317
    317
    ❤ by Brian Design
    Reply
    View 80 replies Hide 80 replies

    Joe Loftus

    6 months ago •
    This is pretty much a great build. You pretty much covered a lot of stuff. You should pretty much keep making stuff like this! ;)
    Show less Read more
    6 months ago
    0
    0
    Reply

    HJ Miranda

    7 months ago •
    I just finished the tutorial and it took me at least 3 days. Awesome tutorial and I love how you debug the problems! New subscriber here!
    Show less Read more
    7 months ago
    0
    0
    ❤ by Brian Design
    Reply

    Ante Zivkovic

    8 months ago •
    I love that we just go through the code and debug along the way. It really adds to realism!
    Show less Read more
    8 months ago
    1
    1
    Reply

    Matej Zmaj

    1 year ago •
    Really amazing work man, I recently created my first mern project to show employers and next was thinking about making portfolio page, this video is inspiring, might create something similar, looking forward to see how you solved some parts! Cheers
    Show less Read more
    1 year ago
    1
    1
    ❤ by Brian Design
    Reply
    View reply from Brian Design Hide reply

    Adam Meziti

    6 months ago •
    Brian, you do more for us than you realize. Bought your bundle in the hopes that you're going to continue to make great content!
    Show less Read more
    6 months ago
    1
    1
    Reply

    Caroline Mendez

    1 year ago •
    Your React using Styled Components have been a life saver. Hoping you do an ecommerce type of website soon! Would love to see what you do with that style
    Show less Read more
    1 year ago
    17
    17
    ❤ by Brian Design
    Reply
    View reply from Brian Design Hide reply
    Filters
    Open search filters
    19:27

    Build a Better Website

    Ad
    PhotoRec TV
    PhotoRec TV
    •
    257K views
    Create Custom Websites Today Easy to Use, Online Website Builder
    28:15 Now playing

    User Profile Functionality in React JS , Node, Express, MongoDB - MERN Stack Tutorial #14

    RoadsideCoder
    RoadsideCoder
    •
    12K views 9 months ago
    RoadsideCoder
    RoadsideCoder
    MernStack #mern #MernTutorial #MernStackProject MERN Stack Tutorial Series with Redux where we will learn to build an ... MernStack #mern #MernTutorial #MernStackProject MERN Stack Tutorial Series with Redux where we will learn to build an ...
    From the video description
    18:19 Now playing

    🔴 MERN #25: Create ABOUT US Page UI using ReactJS in MERN STACK PROJECT in Hindi

    Thapa Technical
    Thapa Technical
    Verified
    •
    16K views 1 year ago
    Thapa Technical
    Thapa Technical
    Verified
    Welcome, how to Create ABOUT US Page UI using ReactJS in MERN STACK PROJECT in Hindi How to Get The Complete ... Welcome, how to Create ABOUT US Page UI using ReactJS in MERN STACK PROJECT in Hindi How to Get The Complete ...
    From the video description
    19:38 Now playing

    User Profile in React native || React Native || Part 1

    Freaky ITians
    Freaky ITians
    •
    4.1K views 1 year ago
    Freaky ITians
    Freaky ITians
    In this video, we will create a User profile using react native app. Part 1: https://youtu.be/PxoZAFWUR6Y Part 2: ... In this video, we will create a User profile using react native app. Part 1: https://youtu.be/PxoZAFWUR6Y Part 2: ...
    From the video description
    32:56 Now playing

    Full Stack Web Development Course [15] | ReactJS, NodeJS, MySQL - Profile Page

    PedroTech
    PedroTech
    •
    4.6K views 10 months ago
    PedroTech
    PedroTech
    Hey everyone, this is episode 15 of this series where I will show how to create a full stack web app! Hey everyone, this is episode 15 of this series where I will show how to create a full stack web app!
    From the video description
    26:10 Now playing

    10 - Edit Profile and Route to Profile Page - Learn React - Facebook Clone

    EduRise
    EduRise
    •
    10K views 2 years ago
    EduRise
    EduRise
    This project is about #Facebook Clone or Replica and it's created just for education purposes. Features: 1. Sign Up 2. Sign In 3. This project is about #Facebook Clone or Replica and it's created just for education purposes. Features: 1. Sign Up 2. Sign In 3.
    From the video description
    2:50:57 Now playing

    React Admin Dashboard Tutorial | React Admin Panel Design Course for Beginners

    Lama Dev
    Lama Dev
    •
    355K views 10 months ago
    Lama Dev
    Lama Dev
    How to create a React admin panel dashboard using React Hooks and functional components. React.js admin panel design for ... How to create a React admin panel dashboard using React Hooks and functional components. React.js admin panel design for ...
    From the video description
    11:08 Now playing

    Web App w/ MERN Stack 2D. Auth - Frontend - User Profile

    danielstuts
    danielstuts
    •
    1.9K views 1 year ago
    danielstuts
    danielstuts
    User login, user logout, user registration and protected routes. 0:00 Intro 0:27 Step 1 - Conditional Rendering - { user ? ( ... ) : ( . User login, user logout, user registration and protected routes. 0:00 Intro 0:27 Step 1 - Conditional Rendering - { user ? ( ... ) : ( .
    From the video description
    20:41 Now playing

    ReactJS Tutorial For Beginners - Creating A Profile Page

    Okay Dexter
    Okay Dexter
    •
    17K views 2 years ago
    Okay Dexter
    Okay Dexter
    reactjs #okaydexter #react #ui #javascript #reactcomponents In this video we'll be looking into how you can create a basic ... reactjs #okaydexter #react #ui #javascript #reactcomponents In this video we'll be looking into how you can create a basic ...
    From the video description
    23:12 Now playing

    User Profile Page in React JS | User Profile Image & Details | #16 MERN STACK Tutorials in Hindi

    Tutorials Website
    Tutorials Website
    •
    15K views 1 year ago
    Tutorials Website
    Tutorials Website
    In this video, we will learn how to create User Profile Page in React JS in Project from Reactjs Frontend using Nodejs Rest API ... In this video, we will learn how to create User Profile Page in React JS in Project from Reactjs Frontend using Nodejs Rest API ...
    From the video description
    15:02 Now playing

    UserProfile Container & Component - Redux Part 18

    CodeWithTim
    CodeWithTim
    •
    6K views 5 years ago
    CodeWithTim
    CodeWithTim
    In this video we build our User Profile Container & Component to allow us to use React Router in future videos. If you've got any ... In this video we build our User Profile Container & Component to allow us to use React Router in future videos. If you've got any ...
    From the video description
    13:38 Now playing

    How to Create Profile Card Components in ReactJS | Profile Card Design

    Coding Nation
    Coding Nation
    •
    8.3K views 1 year ago
    Coding Nation
    Coding Nation
    Hey everyone , in this video I will be making a React Profile Card Component in ReactJS . Font Used ... Hey everyone , in this video I will be making a React Profile Card Component in ReactJS . Font Used ...
    From the video description
    6:01 Now playing

    React, Redux & Firebase App Tutorial #29 - User Profile Data

    The Net Ninja
    The Net Ninja
    Verified
    •
    41K views 3 years ago
    The Net Ninja
    The Net Ninja
    Verified
    Hey gang, in this React, Redux & Firebase tutorial I'll be showing you how we can sync our user data from our firestore database, ... Hey gang, in this React, Redux & Firebase tutorial I'll be showing you how we can sync our user data from our firestore database, ...
    From the video description

    People also watched

    3:21:37 Now playing

    Build and Deploy a Fully Responsive Modern UI/UX Website in React JS

    JavaScript Mastery
    JavaScript Mastery
    Verified
    •
    580K views 5 months ago
    JavaScript Mastery
    JavaScript Mastery
    Verified
    This video is perfect for you if you want to learn how to transform a Figma design into a fully functioning website, improve your ... This video is perfect for you if you want to learn how to transform a Figma design into a fully functioning website, improve your ...
    From the video description
    44:47 Now playing

    React Form Validation Using Custom Hooks Tutorial - Beginner React JS Project

    Brian Design
    Brian Design
    •
    144K views 1 year ago
    Brian Design
    Brian Design
    Learn how to build a simple form in React with validation using custom hooks in this beginner React JS Project tutorial. We will ... Learn how to build a simple form in React with validation using custom hooks in this beginner React JS Project tutorial. We will ...
    From the video description
    31:37 Now playing

    React User Login and Authentication with Axios

    Dave Gray
    Dave Gray
    •
    67K views 3 months ago
    Dave Gray
    Dave Gray
    Create a React User Login and Authentication form with Axios request submission. We'll build a user login form and submit the ... Create a React User Login and Authentication form with Axios request submission. We'll build a user login form and submit the ...
    From the video description
    3:44:08 Now playing

    React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive

    Brian Design
    Brian Design
    •
    825K views 1 year ago
    Brian Design
    Brian Design
    Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will ... Learn how to build a React website using styled components and React smooth scroll. The website is fully responsive and we will ...
    From the video description
    +6 more
    27:44 Now playing

    Login Form in ReactJS with React Hooks

    Tyler Potts
    Tyler Potts
    •
    116K views 1 year ago
    Tyler Potts
    Tyler Potts
    Learn how to create React Forms using a functional component and react hooks. In the video we create a login form that uses ... Learn how to create React Forms using a functional component and react hooks. In the video we create a login form that uses ...
    From the video description
    2:18:34 Now playing

    React Social Media App Design Tutorial | React.js UI Course Full

    Lama Dev
    Lama Dev
    •
    171K views 1 year ago
    Lama Dev
    Lama Dev
    React.js social media application design tutorial. Create social media project using React functional components and React ... React.js social media application design tutorial. Create social media project using React functional components and React ...
    From the video description

    For you

    3:34:26 Now playing

    🔥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]

    CodeBucks
    CodeBucks
    •
    66K views 5 months ago
    CodeBucks
    CodeBucks
    React Portfolio Website Tutorial Demo Link : https://react-portfolio-sigma.vercel.app/ Blog : https://dev.to/codebucks ... React Portfolio Website Tutorial Demo Link : https://react-portfolio-sigma.vercel.app/ Blog : https://dev.to/codebucks ...
    From the video description
    3:24:25 Now playing

    React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)

    EGATOR
    EGATOR
    •
    274K views 1 month ago
    EGATOR
    EGATOR
    In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal ... In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal ...
    From the video description
    3:45:06 Now playing

    🔴 Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)

    Sonny Sangha
    Sonny Sangha
    Verified
    •
    588K views Streamed 8 months ago
    Sonny Sangha
    Sonny Sangha
    Verified
    --- The much anticipated build is FINALLY HERE! Join me as I build the UBER CLONE with REACT NATIVE (yes we're building ... --- The much anticipated build is FINALLY HERE! Join me as I build the UBER CLONE with REACT NATIVE (yes we're building ...
    From the video description
    +17 more
    15:40 Now playing

    Protected Routes in React using React Router

    freeCodeCamp.org
    freeCodeCamp.org
    Verified
    •
    303K views 3 years ago
    freeCodeCamp.org
    freeCodeCamp.org
    Verified
    In this video, we will create a protected route using React Router. This route is accessible only when the user is logged in. Link to ... In this video, we will create a protected route using React Router. This route is accessible only when the user is logged in. Link to ...
    From the video description
    3:04:17 Now playing

    React Admin Panel Tutorial | React Admin Dashboard Template Design

    Lama Dev
    Lama Dev
    •
    73K views 1 month ago
    Lama Dev
    Lama Dev
    0:00 Introduction 01:50 Installation 11:00 React Router Dom 6 Tutorial 18:10 React Sidebar Design (Menu Bar) 34:41 React ... 0:00 Introduction 01:50 Installation 11:00 React Router Dom 6 Tutorial 18:10 React Sidebar Design (Menu Bar) 34:41 React ...
    From the video description
    22:48 Now playing

    ReactJS Tutorial For Beginners - User Registration Form

    Okay Dexter
    Okay Dexter
    •
    42K views 2 years ago
    Okay Dexter
    Okay Dexter
    react.js #okaydexter #react #ui #javascript React.js Tutorial For Beginners - Simple User Registration Form In this video we'll be ... react.js #okaydexter #react #ui #javascript React.js Tutorial For Beginners - Simple User Registration Form In this video we'll be ...
    From the video description
    1:42:17 Now playing

    React Website Tutorial - Beginner React JS Project Fully Responsive

    Brian Design
    Brian Design
    •
    899K views 1 year ago
    Brian Design
    Brian Design
    Learn how to build a React website from scratch in this tutorial. We will use React Hooks and React Router for this beginner React ... Learn how to build a React website from scratch in this tutorial. We will use React Hooks and React Router for this beginner React ...
    From the video description
    1:37:36 Now playing

    🔥 The Ultimate React Js Portfolio Website Responsive (2022)

    Edubaba
    Edubaba
    •
    201K views 6 months ago
    Edubaba
    Edubaba
    At the end of this course, you will be able to deploy the Website on Heroku server, push the source code to GitHub. We will also ... At the end of this course, you will be able to deploy the Website on Heroku server, push the source code to GitHub. We will also ...
    From the video description
    12:34 Now playing

    #16 Creating Profile page UI in react js | MERN stack tutorial in English | Instagram clone

    CODERS NEVER QUIT
    CODERS NEVER QUIT
    •
    16K views 1 year ago
    CODERS NEVER QUIT
    CODERS NEVER QUIT
    In this video we will create profile page UI in react js. Instagram clone using MERN stack #MERN complete code ... In this video we will create profile page UI in react js. Instagram clone using MERN stack #MERN complete code ...
    From the video description